<template>
<div class="uprecord-container">
    <el-dialog title="关联乡镇" :visible.sync="guanlianDialog" width="30%" :append-to-body="true">
        <el-select placeholder="乡镇选择" v-model="editTown" clearable>
            <el-option v-for="item in edittownlist" :key="item" :label="item" :value="item" />
        </el-select>
        <span slot="footer" class="dialog-footer">
            <el-button @click="guanlianDialog = false">取 消</el-button>
            <el-button type="primary" @click="linktown">确 定</el-button>
        </span>
    </el-dialog>
    <div style="display: flex; align-items: center;justify-content: space-between;">
        <div class="row-area" style="margin-top: 10px">
        <span style="color: #4778c7">行政区域选择：</span>
        <el-select placeholder="所属市选择" v-model="currentLiindex" @change="cityChange" v-if="iscityshow" clearable @clear="cityclear">
            <el-option v-for="(item, index) in citylist" :key="item.id" :label="item.label" :value="index" />
        </el-select>
        <ul class="countryArea" v-if="areaShow">
            <li v-for="(item, i) in cityChildren" :key="i" @click="liChange(i)" :class="{ areaActive: i == currentareaindex }">
                {{ item.label }}
            </li>
        </ul>
        <el-select placeholder="乡镇选择" v-model="town" @change="townChange" v-if="istownshow" clearable>
            <el-option v-for="item in townlist" :key="item" :label="item" :value="item" />
        </el-select>
        </div>
        <el-button type="primary" @click="daochu">导出</el-button>

    </div>


    <el-table :data="tableData" stripe border style="width: 100%" class="eltable">
        <el-table-column label="序号" type="index"  />
        <el-table-column label="所属市" prop="city" />
        <el-table-column label="所属区县" prop="country" />
        <el-table-column label="所属乡镇" width="120">
            <template scope="scope">
                <span v-if="scope.row.town">{{scope.row.town}}</span>
                <el-button type="primary" plain @click="guanlian(scope.row)" v-if="!scope.row.town&&role=='区县用户'"><i class="el-icon-link"></i>关联乡镇</el-button>
                <span v-if="!scope.row.town&&role!='区县用户'" style="color:red;font-size: 16px;font-weight: 700;">暂未关联乡镇</span>
            </template>
        </el-table-column>
        <el-table-column label="所属村" prop="village" />
        <el-table-column label="村庄评判">
            <el-table-column label="重点村">
                <el-table-column label="省级" prop="sj" width="50">
                </el-table-column>
                <el-table-column label="本级" prop="bj" width="50">
                </el-table-column>
            </el-table-column>
            <el-table-column label="一般村">
                <el-table-column label="人居环境提升" prop="rjhjts" width="50">
                </el-table-column>
                <el-table-column label="基础管控" prop="jcgk" width="50">
                </el-table-column>
            </el-table-column>
        </el-table-column>
        <el-table-column label="规划编制情况">
            <el-table-column label="已编已批" prop="ybyp" width="50">
            </el-table-column>
            <el-table-column label="已编未批" prop="ybwp" width="50">
            </el-table-column>
            <el-table-column label="在编" prop="zb" width="50">
            </el-table-column>
            <el-table-column label="未编" prop="wb" width="50">
            </el-table-column>
        </el-table-column>
        <el-table-column label="编制方式">
            <el-table-column label="单独编制" prop="ddbz" width="50">
            </el-table-column>
            <el-table-column label="合并编制" prop="hbbz" width="50">
            </el-table-column>
            <el-table-column label="镇村一体" prop="zcyt" width="50">
            </el-table-column>
        </el-table-column>
        <el-table-column prop="gnfl" label="功能分类"  width="100" align="center" />
        <el-table-column label="是否需要提升">
            <el-table-column label="是" prop="tss" width="50">
            </el-table-column>
            <el-table-column label="否" prop="tsf" width="50">
            </el-table-column>
        </el-table-column>
        <el-table-column label="是否通过乡镇国土空间规划提升">
            <el-table-column label="是" prop="xzghs" width="50">
            </el-table-column>
            <el-table-column label="否" prop="xzghf" width="50">
            </el-table-column>
        </el-table-column>
        <el-table-column label="提升时序">
            <el-table-column label="2023年度" prop="tssxa" width="50">
            </el-table-column>
            <el-table-column label="2024年度" prop="tssxb" width="50">
            </el-table-column>
        </el-table-column>
        <el-table-column label="备注" prop="bz" width="200" align="center">
            <template scope="scope">
            <div v-if="scope.row.bz">
                <div v-if="scope.row.bz.length>7"> <span >{{scope.row.bz.substr(0,6)+"..."}}</span>  <el-button type="primary" plain @click="querybz(scope.row.bz)"><i class="el-icon-search"></i>详情</el-button></div>
               
                <span v-else>{{scope.row.bz}}</span>
              
            </div>
            <div v-else>无备注</div>

               
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-if="tableData.length > 0" class="elpagi" :total="total" @size-change="getdata" @current-change="getdata" @prev-click="getdata" @next-click="getdata" :current-page.sync="listquery.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size.sync="listquery.pageSize" layout="total,sizes, prev, pager, next, jumper" />
</div>
</template>

<script>
import {
    getledgerList,
    updateTown,
    getexcel
} from "@/api/uprecord.js";
import {
    getTownList
} from "@/api/country.js";
import tableHeader from "../components/TableHeader";
import queryMixin from "@/mixins/countquery.js";
import {
    mapGetters
} from "vuex";
export default {
    data() {
        return {
            listquery: {
                pageSize: 10,
                currentPage: 1,
            },
            tableData: [],
            total: 0,
            nowuserarea: "",
            role: "",
            guanlianDialog: false,
            editTown: "",
            edittownlist: "",
            currentRow:null

        }
    },
    components: {
        tableHeader,
    },
    computed: {
        ...mapGetters(["citylist"]),
    },
    mixins: [queryMixin],
    mounted() {
        this.role = this.$store.getters.user.roles[0].name;
        console.log(this.role);
        this.nowuserarea = this.$store.getters.user.area;
        this.getdata()
    },
    daochu(){

    },
    methods: {
        async getdata() {
            this.isloading = true;
            let res = await getledgerList(this.listquery);
            this.tableData = res.data.content; 
            this.total = res.data.totalElements;
            this.isloading = false;
        },
        daochu() {
            this.isloading = true;
            this.listquery.pageSize = 50000
            this.listquery.currentPage = 1
            getexcel(this.listquery).then((v) => {
                const blob = new Blob([v], {
                    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
                });
                const link = document.createElement("a"); //创建a标签
                link.download = "村庄规划质量提升台账.xlsx"; //a标签添加属性
                link.style.display = "none";
                link.href = URL.createObjectURL(blob);
                document.body.appendChild(link);
                link.click(); //执行下载
                URL.revokeObjectURL(link.href); //释放url
                document.body.removeChild(link); //释放标签
                this.isloading = false;
            });
        },
        querybz(bz) {
            this.$alert(bz, '备注详情', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'info',
                        message: `action: ${ action }`
                    });
                }
            });
        },
        guanlian(row) {
            this.guanlianDialog = true
            this.currentRow = row
            this.editTown = ""
            getTownList({
                city: row.city,
                country: row.country,
            }).then((res) => {
                this.edittownlist = res.data
            })
        },
        linktown(){
            if(this.editTown==""){
                this.$notify({
                    title: '所选乡镇不能为空',
                    type: 'error',
                    duration: 2500
                })
                return
            }
            const temp = Object.assign({}, this.currentRow);
            temp.town = this.editTown
            updateTown(temp).then((res)=>{
                this.$notify({
                    title: '关联成功',
                    type: 'success',
                    duration: 2500
                })
                this.getdata()
                this.guanlianDialog = false
            }).catch(err=>{
                this.$message.error(err.response.data.message);
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.uprecord-container {
    margin: 5px;
  padding-bottom: 10px;
  overflow-y: auto;
  position: relative;
  height: 100%;

  .row-area {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.countryArea {
  height: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;

  li {
    text-align: center;
    margin-right: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    cursor: pointer;
  }

  .active {
    border-bottom: 3px solid black;
  }
  .areaActive {
    background-color: #4cc8c7;
    color: #fff;
    border-radius: 5px;
    padding: 0 10px;
  }
}

}

::v-deep .el-table thead.is-group th {
    background: #8e98b5;
    color: #fff;
}
</style>
